<template>
    <div>
        <tops wrapheight="1" nowposi="hide" customTitle="分类" showback="1" righttop="hide">
            <div>
                <!-- 占位区:建议保留 -->
                <div style="padding-top:80rpx ;" id="topwraps">
                    <!-- 可删除 -->
                    <div style="height: 100rpx;border-bottom: 2rpx solid #ccc;font-size: 24rpx;">
                        此处放置店铺信息等内容
                    </div>
                </div>
                <!-- 左右区域 -->
                <div style="position: relative;" id="warps">
                    <!-- 左边 -->
                    <div style="position: absolute;top:0;left:0;width: 200rpx;border-right: 2rpx solid #ccc;"
                        :style="{ height: winheight - topget + 'px', position: iffixed ? 'fixed' : 'absolute', top: iffixed ? '80rpx' : 0 }">
                        <scroll-view style="height: 100%;width: 100%;" :scroll-y="ifoverflow" :scroll-into-view="leftid">
                            <div v-for="(v, i) in 30">
                                <div style="padding: 30rpx;border-bottom: 2rpx solid #ccc;" :id="'T_' + i"
                                    :style="{ backgroundColor: leftid == 'T_' + i ? '#eee' : '' }" @click="leftgetright(i)">
                                    分类{{ i }}
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                    <!-- 右边 -->
                    <div style="margin-left: 200rpx; height: 10000rpx;">
                        <div v-for="(v, i) in 30">
                            <div :id="'TI_' + i">
                                <div style="padding: 30rpx;">分类{{ i }}</div>
                                <div style="height: 500rpx;"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 占位获取顶部宽度100%固定元素高度:建议保留 -->
                    <div style="height:80rpx;" id="fixtopheightget"></div>
                </div>
            </div>
        </tops>
    </div>
</template>

<script>
/*
    如果分类顶部还有其他内容要固定，比如xx精选等，除了fixtopheightgets的高度，还要加上xx精选所在元素的高度，来进行内容左侧分类固定的判定
*/
export default {
    data() {
        return {
            uniquery: '',
            winheight: '',
            topget: '',
            fixtopheightgets: '',
            iffixed: 0,
            leftid: '',
            ifoverflow: true,
        }
    },
    methods: {
        setdom() {
            this.winheight = uni.getSystemInfoSync().windowHeight
            if (!this.fixtopheightgets) {
                setTimeout(() => {
                    this.scrollget()
                })
            }
        },
        scrollget() {
            if (this.uniquery == '') {
                this.uniquery = uni.createSelectorQuery().in(this)
            }
            if (this.ifoverflow == false) {
                return;
            }
            this.uniquery.select('#warps').boundingClientRect()
            this.uniquery.select('#fixtopheightget').boundingClientRect()
            this.uniquery.exec(res => {
                for (var i = 0; i < res.length; i++) {
                    if (res[i].id == 'fixtopheightget') {
                        this.fixtopheightgets = res[i].height
                        break;
                    }
                }
                for (var i = 0; i < res.length; i++) {
                    if (res[i].id == 'warps') {
                        this.topget = res[i].top < this.fixtopheightgets ? this.fixtopheightgets : res[i].top
                        this.iffixed = this.topget <= this.fixtopheightgets ? 1 : 0
                        break;
                    }
                }
            })
        },
        //
        leftgetright(id) {
            this.ifoverflow = false
            this.leftid = 'T_' + id
            setTimeout(() => {
                var tops = 0
                var flag = 0
                var temp = (top) => {
                    if (flag == 0) {
                        flag = 1
                        uni.pageScrollTo({
                            scrollTop: top - this.fixtopheightgets,
                            duration: 0
                        })
                    }
                }
                uni.createSelectorQuery().in(this).select('#topwraps').boundingClientRect((resv) => {
                    tops = resv.top
                    uni.createSelectorQuery().in(this).select('#TI_' + id).boundingClientRect((res) => {
                        temp(Math.abs(tops) + res.top)
                        this.leftid = 'T_' + id
                        setTimeout(() => {
                            setTimeout(() => {
                                this.scrollget()
                            }, 10)
                            this.ifoverflow = true
                        }, 100)
                    }).exec()
                }).exec()
            }, 0)
        },
        rightgetleft() {
            if (this.ifoverflow == false) {
                return;
            }
            var tag = ''
            for (var i = 0; i < 30; i++) {
                var tops = 0
                uni.createSelectorQuery().in(this).select('#TI_' + i).boundingClientRect((res) => {
                    tops = res.top
                }).exec()
                if (tops > this.fixtopheightgets) {
                    tag = 'T_' + (i - 1 < 0 ? 0 : i - 1)
                    break;
                }
            }
            this.leftid = tag
        },
        initdata() {
            this.leftid = 'T_0'
        }
    },
    onLoad() {
        this.setdom()
        this.initdata()
        if (window) {
            window.addEventListener('resize', () => {
                this.setdom()
            })
        }
    },
    onPageScroll() {
        this.scrollget()
        this.rightgetleft()
    }
}
</script>